<!-- 我的方案 -->
<template>
    <div class="plan">
        <div >
            <div class="jianyi" v-if="myorder.order">
                <div class="title">{{myorder.chanpininfo[0].mingcheng}}</div>
                <div class="txt">
                    <span>总保费：{{myorder.order.total_money}}元</span>
                    <p>
                        可获得以下保障，比线下代理方案节省40%保费；
                       <!-- {{myorder.order.description}} -->
                    </p>
                </div>
            </div>
            <van-collapse v-model="activeNames">
                <van-collapse-item v-for="(sub_order,index) in myorder.basicinfo" :key="index" :title="sub_order.guanxi" :name="index">
                    <div class="cell" v-for="(item,index2) in sub_order.sub_order" :key="index2">
                        <div class="title">
                            <span>{{item.name}}<van-tag mark type="danger">{{item.type}}</van-tag></span>
                            <span><a :href="item.buy_url">立即投保<van-icon name="arrow" /></a></span>
                        </div>
                        <div class="cent">
                            <span>保险期限：{{item.bz_year}}</span>
                            <span>交费方式：{{item.feetype}}</span>
                            <span>保额：{{item.total}}</span>
                            <span>保费：{{item.totalperyear}}</span>
                            <span v-if="item.desc" style="width:100%">备注：{{item.desc}}</span>
                        </div>
                    </div>
                    
                </van-collapse-item>
            </van-collapse>

            <!-- <div v-for="(sub_order,index) in myorder.basicinfo" :key="index">
                <div class="cell" v-for="(item,index2) in sub_order.sub_order" :key="index2">
                    <div class="title">
                        <span>{{item.name}}<van-tag mark type="danger">{{item.type}}</van-tag></span>
                        <span><a :href="item.buy_url">立即投保<van-icon name="arrow" /></a></span>
                    </div>
                    <div class="cent">
                        <span>关系：{{sub_order.guanxi}}</span>
                        <span>保险期限：{{item.period}}年</span>
                        <span>交费方式：{{item.feetype}}</span>
                        <span>保额：{{item.total}}</span>
                        <span>年交总保费：{{item.totalperyear}}</span>
                    </div>
                </div>
            </div> -->
            <div class="qa">
                <h2>常见问题：</h2>
                <div>
                    <p>Q：这个方案我看不懂，产品也没听过，怎么办？</p>
                    <p>A：马上点击咨询，添加我们规划师给您做再次的讲解！不懂就随时问我们规划师哦！</p>
                </div>
                <div>
                    <p>Q：规划上的保险我都需要买吗？</p>
                    <p>A：理论上是的哦！规划师在设计方案的时候全面考虑家庭风险和个人风险，每个保险都有要解决的问题，如果短期预算不足，也可以先买一部分，剩下的后期在进行补充，但是记得先咨询我们的规划师优先购买顺序哦。</p>
                </div>
                <div>
                    <p>Q：规划上面的产品在哪里能买到？</p>
                    <p>A：在线支付的保险，那么点开规划中的产品名称，里面有立即购买的按钮，点击后即可跳转保险公司官网或者在猫姐说险里进行投保，在线完成交易，保单第二天就生效了（保险公司收保费及出单，猫姐不收保费哒）；线下渠道的产品，那么点开病历中的产品名称，里面有预约服务的按钮，点击后即可进入填资料预约环节，提交资料后，投保单就会寄到你家里啦，线下产品的销售由保险公司营销部门或保险销售中介公司完成，由保险公司直接扣费承保。</p>
                </div>
                <div>
                    <p>Q：在线投保有什么注意事项吗？</p>
                    <p>A：健康告知，这是最重要的，理赔纠纷9成都是由于客户对保险责任理解不到位和没有做健康的如实告知，这两个问题我们都可以在投保前就解决掉，规划师会对产品做详细讲解，会根据您的身体状况制作方案，通过猫姐购买或预约的产品猫姐都免费赠送预核保服务，核保老师指导您做告知，再也不怕被忽悠啦。</p>
                </div>
                <div>
                    <p>Q:在线投保或用的猫姐预约服务的话，谁来给我提供服务，理赔的时候怎么办？</p>
                    <p>A：投保后一般有两项工作，一是变更资料，二是理赔，您如有疑问请拨打猫姐说险客服中心电话400-678-8169进行求助；发生理赔时您要第一时间拨打保险公司官方客服电话进行报案（个人中心有报案电话），同时通知猫姐说险理赔电话400-678-8169，猫姐会持续跟进您的理赔。</p>
                </div>
            </div>
        </div>

        <div class="wu" v-if="!myorder">
            <div>
              <img :src="img">
              <p>目前还没有方案，赶快去定制吧</p>
            </div>
            <div class="btnBox">
              <router-link class="btn" to='/'>立即定制</router-link>
            </div>
        </div>


        <div class="btnBox" v-if="myorder">
          <zixun/>
        </div>
    </div>
</template>

<script>
import zixun from '@/components/zixun.vue'
export default {
    components: {zixun},
    data() {
        return {
            activeNames: [0],
            img:require("@/assets/wu.png"),
            myorder:''
        };
    },
    mounted() {
        this.$api.getmyorder().then(res=>{
            this.myorder = res.data || ''
        })
    },
    methods: {

    }
};
</script>
<style lang='less' scoped>
.plan {
    width: 100%;
    min-height: 100vh;
    background: #f2eff2;
    padding: 0 0 80px;
}
.jianyi {
    background: #fff;
    margin-bottom: 5px;
    .title {
        background: #ff8604;
        height: 44px;
        line-height: 44px;
        font-size: 17px;
        text-align: center;
    }
    .txt {
        padding: 15px;
        span {
            color: #ff8604;
            font-size: 17px;
            font-weight: bold;
            margin-bottom: 5px;
            margin-right: 20px;
        }
        p {
            color: #9e9a98;
            font-size: 14px;
        }
    }
}

.van-collapse-item {
    margin-bottom: 5px;
}

.btnBox {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 15px;
    width: 100%;
    border-radius: 17px 17px 0 0;
  }

.wu{
  text-align: center;
  padding-top: 180px;
  img{width: 99px;height: 88px;}
  p{color: #9F9A98; font-size: 13px;margin-top: 30px;}
}

.cell{background: #fff;
    margin-bottom: 5px;
    border-bottom: 1px solid #ebedf0;
    &:last-of-type{border: none}
    .title{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        line-height: 30px;
        span:nth-child(1){color: #373636;
            .van-tag {color: #fff;margin-left: 5px;}
        }
        span:nth-child(2){
            a{color: #555;
                .van-icon{vertical-align: middle}
            }
        }
    }
    .cent{
        font-size: 14px;
        color: #666;
        line-height: 30px;
        span{width: 50%;display: inline-block;}
    }
}

.qa{
  color: #403d3c;
  padding: 20px;
  padding-bottom: 60px;
  h2{font-size: 18px}
  >div{
    margin: 10px 0;
    p:nth-child(1){font-size: 16px;}
    p:nth-child(2){font-size: 14px;color: #9E9A98}
  }
}
</style>